<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <Button class="opt-btn" @click="showAddModal" type="primary">添加</Button>
          <Dropdown class="opt-btn" @on-click="batchOpt">
            <Button type="primary">
              批量操作
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="batchActive">批量激活</DropdownItem>
              <DropdownItem name="batchInactive">
                <span style="color: red;">批量冻结</span>
              </DropdownItem>
              <DropdownItem name="batchRemove" divided>
                <span style="color: red;">批量删除</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Button class="opt-btn" @click="showSearchModal" type="primary">高级搜索</Button>
          <Tooltip class="opt-btn" content="刷新" placement="right">
            <Button icon="md-refresh" type="success" shape="circle" @click="searchTable(false)"></Button>
          </Tooltip>
                    <Tooltip class="opt-btn" content="重置搜索" placement="right">
                        <Button icon="md-repeat" type="success" shape="circle" @click="researchTable"></Button>
                    </Tooltip>
          <AdvertisementTableMain
            ref="table"
            v-on:searchTable="searchTable"
            v-on:showEditModal="showEditModal"
            v-on:showDetailModal="showDetailModal"
            v-on:showUploadModal="showUploadModal"
            v-on:showUploadModalVideo="showUploadModalVideo"
            v-on:showModuleDetail="showModuleDetail"
            v-on:showModuleSearch="showModuleSearch"
          />
        </Card>
      </i-col>
    </Row>
    <AdvertisementAddEditModal ref="addEditModal" v-on:add="add" v-on:edit="edit" />
    <AdvertisementSearchModal ref="searchModal" v-on:searchTable="searchTable" />
    <AdvertisementDetailModal ref="detailModal" />
    <UploadModal
      ref="uploadModal"
      @search="searchTable"
      :title="uploadModal.title"
      :format="uploadModal.format"
    />
    <UploadModal
      ref="uploadModalVideo"
      @search="searchTable"
      :title="uploadModalVideo.title"
      :format="uploadModalVideo.format"
    />
    <AdvertisementTypeDetailModal ref="moduleDetail" />
    <Modal
      v-model="modal.moduleSearch"
      title="选择广告类型查询"
      :mask-closable="false"
      width="1020"
    >
      <AdvertisementTypeMainSingle
        ref="moduleSearch"
        v-on:confirmChoice="confirmChoice"
      />
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('moduleSearch')">取消</Button>
        <Button type="primary" size="large" @click="bottomConfirmChoice">确认选择</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
import AdvertisementTableMain from './AdvertisementTableMain.vue'
import AdvertisementAddEditModal from './AdvertisementAddEditModal.vue'
import AdvertisementSearchModal from './AdvertisementSearchModal.vue'
import AdvertisementDetailModal from './AdvertisementDetailModal.vue'
import AdvertisementTypeDetailModal from '../advertisement-type/AdvertisementTypeDetailModal.vue'
import AdvertisementTypeMainSingle from '../advertisement-type/AdvertisementTypeMainSingle.vue'
import UploadModal from '_c/upload-modal'

export default {
  name: 'AdvertisementMain',
  components: {
    AdvertisementTableMain,
    AdvertisementAddEditModal,
    AdvertisementSearchModal,
    AdvertisementDetailModal,
    UploadModal,
    AdvertisementTypeDetailModal,
    AdvertisementTypeMainSingle
  },
  data() {
    return {
      urls: {
        batchRemoveUrl: '/advertisement/admin/batch-remove',
        batchActiveUrl: '/advertisement/admin/batch-active',
        oneUrl: '/advertisement-type/admin/one/',
      },
      uploadModal: {
        title: '上传广告图片',
        format: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
        uploadUrl: '/advertisement/admin/upload/'
      },
      uploadModalVideo: {
        title: '上传广告视频',
        format: ['mp4', 'webm', 'ogg'],
        uploadUrl: '/advertisement/admin/upload-video/'
      },
      modal: {
        moduleSearch: false
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    searchTable(reset) {
      utils.search(this, reset)
    },
    researchTable() {
        this.$refs.searchModal.resetForm()
        setTimeout(() => {
            utils.search(this, true)
        }, 10);
    },
    showAddModal() {
      let addEditModal = this.$refs.addEditModal
      addEditModal.modal.add = true
    },
    add() {
      utils.add(this)
    },
    showEditModal(row) {
      let addEditModal = this.$refs.addEditModal
      utils
        .doGet(this.urls.oneUrl + row.adTypeId, {})
        .then(res => {
          if (ResponseStatus.OK === res.data.code) {
            const title = res.data.data.title
            if (title) {
              row.adTypeName = title
            }

            addEditModal.modal.edit = true
            row.version = null
                row.createTime = null
                row.updateTime = null
                addEditModal.form = row
          } else {
            this.$Message.error(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    edit() {
      utils.edit(this)
    },
    showDetailModal(row) {
      let detailModal = this.$refs.detailModal
      detailModal.modal.detail = true
      detailModal.form = row
	  detailModal.getDictItemsDisplayValue()
    },
    showSearchModal() {
      let searchModal = this.$refs.searchModal
      searchModal.modal.search = true
    },
    batchOpt(itemName) {
      if (itemName === 'batchActive') {
        utils.batchActive(this, 0)
      } else if (itemName === 'batchInactive') {
        utils.batchActive(this, 1)
      } else if (itemName === 'batchRemove') {
        utils.batchRemove(this)
      }
    },
    showUploadModal(row) {
      if (row.adType === null || row.adType === undefined) {
        this.$Message.warning('请先设置广告形式')
        return
      }
      if (row.adType !== 0) {
        this.$Message.warning('广告形式不是图片')
        return
      }
      let uploadModal = this.$refs.uploadModal
      uploadModal.uploadUrl = this.uploadModal.uploadUrl + row.id
      uploadModal.uploadModal = true
    },
    showUploadModalVideo(row) {
      if (row.adType === null || row.adType === undefined) {
        this.$Message.warning('请先设置广告形式')
        return
      }
      if (row.adType !== 1) {
        this.$Message.warning('广告形式不是视频')
        return
      }
      let uploadModal = this.$refs.uploadModalVideo
      uploadModal.uploadUrl = this.uploadModalVideo.uploadUrl + row.id
      uploadModal.uploadModal = true
    },
    showModal(modal) {
      utils.showModal(this, modal)
    },
    cancelModal(modal) {
      utils.cancelModal(this, modal)
    },
    /**
     * 显示模块详情
     */
    showModuleDetail(id) {
      utils
        .doGet(this.urls.oneUrl + id, {})
        .then(res => {
          if (ResponseStatus.OK === res.data.code) {
            let moduleDetail = this.$refs.moduleDetail
            moduleDetail.form = res.data.data
            moduleDetail.modal.detail = true
          } else {
            this.$Message.error(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
     * 显示模块搜索
     */
    showModuleSearch() {
      this.showModal('moduleSearch')
      this.$refs.moduleSearch.searchTable()
    },
    /**
     * 底部的确认选择
     */
    bottomConfirmChoice() {
      this.$refs.moduleSearch.confirmSelection()
    },
    /**
     * 确认选择
     */
    confirmChoice(row) {
      this.cancelModal('moduleSearch')
      let searchModal = this.$refs.searchModal
      searchModal.searchForm.adTypeIdMin = searchModal.searchForm.adTypeIdMax =
        row.id
      this.searchTable()
    },
  }
}
</script>

<style>
</style>
